<template>
  <div>
    <el-form ref="tableForm"
             :model="tableForm"
             :rules="rules"
             size="small">
      <el-table :data="tableData"
                :row-style="{height:'100px'}"
                class="tables"
                style="width: 100%">
        <el-table-column v-for="(column, index) in columns"
                         :key="index"
                         :prop="column.prop"
                         :width="column.width"
                         :label="column.label">
          <template slot="header">
            <span style="color:#f67979">*</span>
            <span class="tableHeader">{{ column.label }}</span>
          </template>
          <template slot-scope="scope">
            <span v-if="column.editable">
              <div v-if="column.type === 'value'">
                <span class="span-flex">
                  <el-form-item v-if="scope.row.min"
                                :prop="`tableData[${scope.$index}].minValue`"
                                :rules="rules.minValue">
                    <el-input v-model="scope.row[column.minValue]"
                              :disabled="disabled"
                              class="input-width"
                              @input="handleInput(scope.$index, scope.row, 'min')" />
                  </el-form-item>
                  <span class="mark">{{ scope.row.min ? '~' : '>='}}</span>
                  <el-form-item v-if="scope.row.max"
                                :prop="`tableData[${scope.$index}].maxValue`"
                                :rules="rules.maxValue">
                    <el-input v-if="scope.row.max"
                              v-model="scope.row[column.maxValue]"
                              :disabled="disabled"
                              class="input-width"
                              @input="handleInput(scope.$index, scope.row, 'max')" />
                  </el-form-item>
                </span>
                <!-- <el-tooltip :content="scope.row[column.text]"
                            placement="top">
                  <p>{{ scope.row[column.text] }}</p>
                </el-tooltip> -->
                <p v-show="scope.row[column.text]"
                   class="red-prompt">{{ scope.row[column.text] }}</p>
              </div>
              <span v-else>
                <el-form-item :prop="`tableData[${scope.$index}].price`"
                              :rules="rules.price">
                  <el-input v-model="scope.row[column.prop]" />
                </el-form-item>
              </span>
            </span>
            <div v-else
                 class="align">
              <!-- {{ scope.row[column.prop] || '--'}} -->
              <span v-show="!scope.row.isClearActive">{{ `${scope.row.minValue || 0}≤X＜${scope.row.maxValue || 0}` }}</span>
              <span v-show="scope.row.isSecond">{{ `${scope.row.minValue || 0}≤X＜${scope.row.maxValue || 0}` }}</span>
              <!-- <span v-show="!scope.row.min">{{ `≥${scope.row.maxValue || 0}` }}</span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!disabled"
                         label="操作"
                         width="90px">
          <template v-if="scope.row.min"
                    slot-scope="scope">
            <el-button type="text"
                       @click="handleAdd(scope.$index)">新增</el-button>
            <el-button v-if="scope.row.isClearActive"
                       type="text"
                       @click="handleRemove(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  // expression: "0＜X＜1" 开头
  // expression: "1≤X＜5"  中间
  // expression: "≥20"     结尾
  // isClearActive 是否显示删除按钮 和 第一段表达式
  // isSecond 区间值是否第二段
  // max min  maxValue  minValue
  name: 'UnitValueComponent',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Array,
      default: () => []
    },
    unitHeader: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      columns: [
        { prop: "intervalValue", label: "区间值", maxValue: 'maxValue', minValue: 'minValue', type: 'value', editable: true, text: 'text' },
        { prop: "expression", label: "表达式", width: '120px' },
        { prop: "price", label: "价格", editable: true, width: '100px' }
      ],
      rules: {
        minValue: [{ required: true, message: '必填', trigger: 'blur' }, {
          pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
          message: "只能7位整数，2位小数",
          trigger: "blur"
        }],
        maxValue: [{ required: true, message: '必填', trigger: 'blur' }, {
          pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
          message: "只能7位整数，2位小数",
          trigger: "blur"
        }],
        price: [{ required: true, message: '必填', trigger: 'blur' }, {
          pattern: /^(\d{0,7})(\.(\d{0,2}))?$/g,
          message: "只能7位整数，2位小数",
          trigger: "blur"
        }]
      },
      tableForm: {
        tableData: [
          { expression: "", price: '', minValue: 0, maxValue: '', text: '', max: true, min: true, isClearActive: false },
          { expression: "", price: '', minValue: '', maxValue: '', text: '', max: true, min: true, isSecond: true, isClearActive: true },
          // { expression: "", price: '', maxValue: '', max: true, min: false, isClearActive: true }
        ]
      }
    }
  },
  computed: {
    tableData () {
      return this.tableForm.tableData
    }
  },
  watch: {
    disabled: {
      handler (value) {
        console.log('disabled', value)
      }
    },
    rows: {
      deep: true,
      immediate: true,
      handler (value) {
        this.updateTableData(value)
        this.$nextTick(() => {
          this.$refs.tableForm.clearValidate()
        })
      }
    },
    unitHeader: {
      handler (value) {
        this.updateTableData(value)
      }
    }
  },
  created () {
    console.log('tableData', this.tableData)
    // console.log('unitHeader', this.unitHeader)
  },
  methods: {
    updateTableData (value) {
      if (value.length) {
        this.tableForm.tableData = value.map((item, index) => {
          const val = value[index];
          console.log('val  updateTableData', val)
          return {
            ...item,
            maxValue: val?.maxValue,
            minValue: val?.minValue,
            price: val?.price,
            max: true,
            min: true,
            isSecond: index !== 0,
            isClearActive: index === 0 ? false : true
          };
        });
      } else {
        this.tableForm.tableData = [
          { expression: "", price: '', minValue: '', maxValue: '', text: '', max: true, min: true, isClearActive: false },
          { expression: "", price: '', minValue: '', maxValue: '', text: '', max: true, min: true, isSecond: true, isClearActive: true }
        ]
      }
    },
    handleAdd (index) {
      if (this.tableData.length >= 7) return this.$message.warning('区间值不能超过7条');
      const prevTableData = this.tableData[index]
      let newObj = { expression: "", price: "", minValue: prevTableData?.maxValue, maxValue: '', text: '', max: true, min: true, isSecond: true, isClearActive: true }
      this.tableData.splice(index + 1, 0, newObj);
    },
    handleRemove (index) {
      this.tableData.splice(index, 1);
      this.tableData.forEach((item, index) => {
        if (index !== 0) {
          item.maxValue = ''
          item.minValue = ''
        }
      })
    },
    handleInput (index, row, type) {
      if (type === 'max' && this.tableData[index + 1]) {
        this.tableData[index + 1].minValue = row?.maxValue

        if (this.tableData[index + 1].maxValue && !this.tableData[this.tableData.length - 1].minValue) {
          this.$set(this.tableData, index + 1, {
            ...this.tableData[index + 1],
            text: Number(row?.maxValue) >= Number(this.tableData[index + 1].maxValue) ? '最小值不能>=最大值' : ''
          })
        }
        if (this.tableData[index + 1].maxValue && this.tableData[index + 1].minValue) {
          this.$set(this.tableData, index + 1, {
            ...this.tableData[index + 1],
            text: Number(this.tableData[index + 1].minValue) >= Number(this.tableData[index + 1].maxValue) ? '最小值不能>=最大值' : ''
          })
        }
      } else if (type === 'min' && index != 0) {
        this.tableData[index - 1].maxValue = row?.minValue

        this.$set(this.tableData, index - 1, {
          ...this.tableData[index - 1],
          text: Number(row?.minValue) <= Number(this.tableData[index - 1].minValue) ? '最小值不能>=最大值' : ''
        })
      }
      if (row?.minValue && row?.maxValue) {
        this.$set(this.tableData, index, {
          ...row,
          text: Number(row?.minValue) >= Number(row?.maxValue) ? '最小值不能>=最大值' : ''
        })
      }
      this.$emit('verifyTableDataText', this.tableData)
      // if (this.tableData[this.tableData?.length - 2]?.maxValue) {
      //   this.tableData[this.tableData?.length - 1].maxValue = this.tableData[this.tableData?.length - 2]?.maxValue
      // }
    }
  }
}
</script>


<style scoped>
.tables {
  position: relative;
  z-index: 99;
}
.span-flex {
  display: flex;
  align-items: center;
  text-align: right;
}
.align {
  text-align: center;
}
.input-width {
  position: relative;
}
.input-width >>> .el-input__inner {
  width: 70px;
}

/* .span-flex >>> .el-form-item__error {
  position: absolute;
  width: 100px;
  word-break: break-word;
} */

::v-deep .el-form-item__error {
  position: absolute;
  width: 200px;
  text-align: left;
  font-size: 12px;
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 14px;
}
.mark {
  width: 100%;
  text-align: center;
  margin-bottom: 14px;
}
.el-table >>> th.el-table__cell .cell {
  justify-content: center;
}
@keyframes fadenum {
  /*设置内容由显示变为隐藏*/
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*元素使用该效果*/
p {
  color: var(--prev-color-text-purered);
  -webkit-animation: fadenum 1s ease;
  -moz-animation: fadenum 1s ease;
  animation: fadenum 1s ease;
  margin: 0;
  line-height: 12px;
  position: absolute;
  top: 76px;
  border-radius: 10px;
}
</style>

